<template>
	<view class="demo">
		<nav-bar isBack title="产品包"></nav-bar>
		<!-- banner -->
		<view class="d_banner" v-if="info.productPack">
			<swiper class="swiper" autoplay interval="4200" duration="300" @change="bannerChange">
				<!-- <view> -->
				<swiper-item v-for="(item,index) in thumb_url" :key="index">
					<view class="d_bItem">
						<image :src="item.image_path"></image>
					</view>
				</swiper-item>
				<!-- </view> -->
			</swiper>
			<view class="d_bDots">
				<view v-for="(item, index) in thumb_url" :key="index">
					<view class="d_bDot" :class="{ active: index == bannerIndex }">
						<view class="d_bIcon"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="d_content" v-if="info.productPack">
			<view class="topinfo">
				<view class="infoshare">
					<image src="@/static/mall/share.png"></image>
					<text>分享</text>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="sharebtn"></button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button @click="actionsheettip" class="sharebtn"></button>
					<!-- #endif -->
				</view>
				<view class="d_cTitle">{{ info.productPack.name }}</view>
				<view class="d_cInfo flex">
					<!-- <text class="pR-32">产品包案例</text> -->
					<text>销售价{{info.productPack.price}}</text>
					<text style="margin-left:8rpx;text-decoration:line-through;">原价{{info.productPack.primary_price}}</text>
				</view>
			</view>
			<view class="d_cTextarea">
				<!-- 标签：d_ctTit/d_ctTxt/d_ctImg -->
				<view class="columnTitle" v-if="goodsList.length>0">产品包详情</view>
				<view class="goodsBox" v-if="goodsList.length>0">
					<view class="goodsItem flex"  v-for="(item,index) in goodsList" :key="index" @click="goGoodsDetail(item.product_id,item.diy_list_id)">
						<view class="goods-cover">
							<image :src="item.main_imgurl">
							</image>
						</view>
						<view class="goods-dateils">
							<view class="columnTop flex">
								<view class="title text-ellipsis">{{item.product_title}}</view>
							</view>
							<view class="bottomBox flex">
								<view class="spec flex">
									<text v-if="item.sku_data[0].attribute.length>0">{{item.sku_data[0].attribute[0].key}} | {{item.sku_data[0].attribute[0].value}}</text>
									<text style="margin-left: 4rpx;" v-if="item.sku_data[0].attribute.length>0">x{{item.sku_data[0].num}}</text>
								</view>
								<view class="sidebarRight pricr">
									￥{{item.primary_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="d_ctTxt">
				<u-parse :html="details"></u-parse>
				<!-- <rich-text :nodes="details | formatRichText" selectable='true'></rich-text> -->
			</view>
		</view>
		<view class="into_shopcart">
			<view class="into_shopcart_box" style="width: 100%;">
				<!-- 左边小图标 -->
				<view class="into_icon">
					<view style="display: flex;">
						<!-- #ifdef MP-WEIXIN -->
						<view class="icon_service" @tap="toCustomer()" v-if="!config_id && !config_url">
							<view class="service">
								<view class="iconfont icon-comment2"></view>
							</view>
							<text>客服</text>
						</view>
						<view class="icon_service" v-else @click="gitpouchatshow">
							<view class="service">
								<view class="iconfont icon-comment2"></view>
							</view>
							<text>客服</text>
						</view>
		
						<!-- #endif -->
						<view class="icon_service" @tap="toShopCart()">
							<view class="service">
								<view class="iconfont icon-shopping"></view>
							</view>
							<text>购物车</text>
						</view>
					</view>
				</view>
				<!-- 右边按钮 -->
				<view class="into_btn">
					<!-- 加入购物车 -->
					<view class="join_cart" @click="addCart(1)"><text>加入购物车</text></view>
					<!-- 去结算 -->
					<view class="into_settlement" @click="buy(1)"><text>立即购买</text></view>
				</view>
			</view>
		</view>
		<!-- <view class="d_fixed" style="right: 32rpx;bottom: 500rpx;">
			<view class="d_fBtn" @click="GoEvaluate">
				<view class="d_fcIcon">
					<image src="https://cos.ryz1620.com/liankun/static/packpingjia.png"></image>
				</view>
				<view class="d_fcTxt">用户评价</view>
			</view>
		</view> -->
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow==true">
			<view class="poucont">
				<view class="chatlist">
					<view class="chatml" @click="gitwxchat()" v-if="config_url">
						<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
						<text class="t1">在线微信客服</text>
						<text class="t2">可直接联系客服</text>
					</view>
					<view class="chatml" v-if="config_id">
						<cell class="cell-service" bind:startmessage='startmessage'
							bind:completemessage="completemessage" :plugid="config_id" />
						<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
						<text class="t1">添加微信客服</text>
						<text class="t2">扫微信二维码</text>
					</view>
				</view>
				<view class="iconfont icon-close" @click="wxCodeClick"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar';
	import service_product from '@/service/product.js';
    import service_mall from '@/service/mall.js';
	export default {
		data() {
			return {
				info: '',
				product_pack_scene: '',
				details: '',
				pack_id: '',
				sku_id: '',
				// 轮播图
				bannerIndex: 0,
				thumb_url: [],
				bannerCurrent: 0,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				share_uid: '', //分享者id
				goodsList: [],
				baseImg: this.$static,
				config_id: '',
				config_url: '',
				pouchatshow: false,
			};
		},

		components: {
			navBar
		},

		onLoad(params) {
			this.$utils.getUrl()
			this.userId = uni.getStorageSync('userId');
			let token = uni.getStorageSync('token');
			let shareuId = params.share_id;
			let scene = decodeURIComponent(params.scene);
			scene = scene.split('&');
			let obj = {};
			for (let i = 0; i < scene.length; i++) {
				let newscene = scene[i].split('=');
				obj[newscene[0]] = newscene[1];
			}
			if (obj.s) {
				this.share_uid = obj.s;
			}
			if (obj.share_id) {
				this.share_uid = obj.share_id;
			}
			if (obj.pid) {
				this.pack_id = obj.pid;
			} else {
				this.pack_id = params.pack_id;
			}
			if (params.share_id) {
				this.share_uid = shareuId;
			}
			this.getDetail();
			this.getPackGoods();
			this.$store.commit('index/SET_shareuId', shareuId);
			if (token && shareuId) {
				service_mall
					.getPromoter({
						share_uid: shareuId
					})
					.then(res => {});
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {}
			return {
				title: this.info.productPack.name,
				path: '/pages_product/pages/product/newPackDetail/detail?pack_id=' + this.pack_id + '&share_id=' + this.userId,
				success: function(res) {
					console.log('成功', res);
				}
			};
		},
		//分享朋友圈
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: this.info.productPack.name,
				path: '/pages_product/pages/product/newPackDetail/detail?pack_id=' + this.pack_id + '&share_id=' + this.userId,
				imageUrl: info.productPack.lead_img,
				success: function(res) {

				}
			};
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:20rpx auto;border-radius:10rpx;"'
				);
				return newContent;
			}
		},
		methods: {
			GoEvaluate() {
				uni.navigateTo({
					url: '/pages_product/pages/product/evaluate/list?pack_id=' + this.pack_id
				})
			},
			// 获取详情数据
			getDetail() {
				service_product
					.newPackDetail({
						pack_id: this.pack_id
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							this.info = data;
							this.product_pack_scene = data.product_pack_scene;
							this.details = data.product_pack_scene.content;
							this.sku_id = data.productPack.sku_lst[0].id;
							this.thumb_url = data.product_pack_scene.thumb_url;
							this.gitConfig();
							this.gitwxConfig();
						}
					});
			},
			//获取商品列表
			getPackGoods(){
				service_product
					.newProductsGoods({
						pack_id: this.pack_id
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							this.goodsList = data;
						}
					});
			},
			gitpouchatshow() {
				this.pouchatshow = true
			},
			wxCodeClick() {
				this.pouchatshow = false
			},
			gitwxchat() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: this.config_url
					},
					corpId: this.$env.CORPID,
					success(res) {}
				})
			},
			// 添加购物车
			addCart(e) {
				// console.log(this.goodsInfo.stockNum)
				let token = uni.getStorageSync('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages_login/pages/login/login/index'
					});
				}
				service_product.packCartAdd({
					pack_id: this.pack_id,
					sku_id:this.sku_id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '添加购物车成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({
					partner_type: this.info.productPack.role_type,
					partner_id: this.info.productPack.store_id
				}).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({
					partner_type: this.info.productPack.role_type,
					partner_id: this.info.productPack.store_id
				}).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			moveHandle() {},
			toCustomer() {
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
			},
			// 购买产品包
			buy() {
				let params = {
					origin_type: 2,
					cart_ids: '',
					goods: {
						sku_id: this.sku_id,
						pack_id: this.pack_id,
						num: 1
					},
					share_id: this.share_uid
				};
				uni.setStorage({
					key: 'order_list',
					data: params,
					success: () => {
						uni.navigateTo({
							url: '/pages_product/pages/product/order/order?sourceFrom=detail&Nocart=1'
						});
					}
				});
			},
			// 轮播图
			bannerChange(e) {
				this.bannerIndex = e.detail.current;
			},
			topage(id) {
				uni.navigateTo({
					url: '/pages_product/pages/product/classify/classify?pack_id=' + id
				});
			},
			//购物车列表
			toShopCart(){
				uni.navigateTo({
					url: '/pages_mall/pages/mall/cart/cart?tab=' + 2
				});
			},
			goGoodsDetail(goods_id,diy_list_id){
				uni.navigateTo({
					url: '/pages_product/pages/product/newPackDetail/goods_details?pack_id=' + this.pack_id+'&product_id='+goods_id+'&diy_list_id='+diy_list_id
				});
			},
			// app分享
			actionsheettip() {
				let title = this.info.productPack.name;
				let imageUrl = this.thumb_url[0].image_path;
				let path = '/pages_product/pages/product/detail/detail?pack_id=' + this.pack_id + '&share_id=' + this
					.userId;
				let that = this;
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.compressImage({
								src: res.tempFilePath,
								quality: 30,
								success: ress => {
									var tempFilePath = ress.tempFilePath;
									that.$common.appShare(title, tempFilePath, path, result => {
										if (result == 'success') {
											// 	分享成功
										}
									})
								}
							})
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.demo {

		// navBar=====
		.d_navBar {
			height: 0;
			position: relative;
			z-index: 500;
		}

		// banner=====
		.d_banner {
			height: 500rpx;
			background: #f0f0f0;
			position: relative;
			z-index: 1;

			.d_bItem {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.d_bTag {
				height: 58rpx;
				line-height: 58rpx;
				color: #fff;
				font-size: 24rpx;
				padding: 0 24rpx;
				border-radius: 28rpx;
				background: rgba(51, 51, 51, 0.8);
				position: absolute;
				bottom: 78rpx;
				right: 36rpx;
			}

			.d_bDots {
				width: 100%;
				position: absolute;
				bottom: 66rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}

			.d_bDot {
				width: 24rpx;
				height: 36rpx;

				&.active .d_bIcon {
					background: #ffd425;
				}

				.d_bIcon {
					width: 12rpx;
					height: 12rpx;
					margin: 12rpx auto 0;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.5);
				}
			}
		}

		// 内容=====
		.d_content {
			padding: 40rpx 0;
			margin-top: -58rpx;
			border-radius: 20rpx 20rpx 0 0;
			background: #fff;
			position: relative;
			z-index: 2;
			padding-bottom: 420rpx;
			box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;

			.d_cTextarea {
				width: 92%;
				margin: auto;
				margin-top: 30rpx;

				.columnTitle {
					width: 160rpx;
					height: 35rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #252525;
				}

				.goodsBox {
					width: 100%;
					margin: 50rpx auto;
					position: relative;

					.goodsItem {
						width: 100%;
						height: auto;
						margin-bottom: 60rpx;

						.goods-cover {
							width: 28%;

							image {
								width: 190rpx;
								height: 190rpx;
								border-radius: 10rpx;
							}
						}

						.goods-dateils {
							width: 72%;
							margin-left: 20rpx;
                            position: relative;
							.columnTop {
								width: 100%;
								justify-content: space-between;
								position: relative;

								.title {
									width: 450rpx;
									height: 80rpx;
								}

								.shareIcon {
									width: 80rpx;
									height: 80rpx;

									image {
										width: 100%;
										height: 100%;
										margin-top: -8px;
									}
								}
							}

							.bottomBox {
								position: absolute;
								align-items: flex-end;
								justify-content: space-between;
                                bottom:20rpx;
								left: 10rpx;
								right: 10rpx;
								.spec {
									width: 350rpx;
									font-size: 24rpx;
									height: auto;
									color: #92949A;
								}

								.pricr {
									color: #333333;
									font-size: 30rpx;
									font-weight: bold;
									padding-right: 20rpx;
									text-decoration:line-through;
								}
							}

						}
					}
				}
			}

			.d_cTitle {
				min-height: 56rpx;
				line-height: 56rpx;
				font-size: 40rpx;
				font-weight: bold;
				padding: 0 32rpx;
			}

			.d_cInfo {
				min-height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 36rpx;
				margin-top: 20rpx;
			}

			// 用户信息
			.d_cUser {
				height: 128rpx;
				margin: 60rpx 32rpx 0;
				border-radius: 64rpx;
				background: #f9f6f3;
			}

			.d_cuHeadimg {
				width: 88rpx;
				height: 88rpx;
				margin: 20rpx 16rpx 0 20rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
				overflow: hidden;
			}

			.d_cuFocus {
				height: 128rpx;
				padding: 0 40rpx 0 28rpx;
				float: right;
			}

			.d_cuBtn {
				width: 136rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #fff;
				font-size: 20rpx;
				padding-left: 56rpx;
				margin-top: 40rpx;
				border-radius: 28rpx;
				background: #333;
				position: relative;
				box-sizing: border-box;

				&::before,
				&::after {
					content: '';
					width: 2rpx;
					height: 12rpx;
					border-radius: 4rpx;
					background: #fff;
					position: absolute;
					top: 50%;
					left: 36rpx;
					transform: translateY(-50%);
				}

				&::after {
					transform: translateY(-50%) rotate(90deg);
					transform-origin: 50% 50%;
				}
			}

			.d_cuCont {
				padding-top: 26rpx;
				overflow: hidden;
			}

			.d_cuName {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
			}

			.d_cuFans {
				height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
			}

			// 富文本内容
			.d_ctTit {
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding: 0 32rpx;
				margin-top: 60rpx;
			}

			.d_ctTxt {
				line-height: 44rpx;
				padding: 0 36rpx;
				margin-top: 28rpx;
			}

			.d_ctImg {
				height: 376rpx;
				margin: 28rpx 32rpx 0;
				border-radius: 8rpx;
				background: #f0f0f0;
				overflow: hidden;
			}

			.d_cAuth {
				padding: 0 36rpx;
				margin-top: 80rpx;
			}

			.d_caTxt {
				line-height: 44rpx;
				color: #939393;
				font-size: 24rpx;
			}

		}

		// 评论=====
		.d_evaluate {
			padding: 40rpx 0;
			background: #fff;

			.d_eTitle {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding-left: 36rpx;

				&>text {
					font-size: 24rpx;
					font-weight: bold;
					padding-left: 8rpx;
				}
			}

			.d_eList {
				padding-left: 32rpx;
			}

			.d_eItem {
				margin-top: 30rpx;

				&:nth-last-child(1) .p_eCont::after {
					content: none;
				}
			}

			.d_eHead,
			.d_eIts .d_eiHead {
				width: 66rpx;
				height: 66rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
			}

			.d_eCont {
				padding-bottom: 28rpx;
				position: relative;
				overflow: hidden;

				&::after {
					content: '';
					width: 100%;
					height: 1px;
					background: #f4f4f4;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(0.5);
				}
			}

			.d_eName,
			.d_eIts .d_eiName {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
			}

			.d_eAuth,
			.d_eIts .d_eiAuth {
				width: 64rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #333;
				font-size: 20rpx;
				margin-left: 8rpx;
				border-radius: 28rpx;
				background: #f6f7fb;
				display: inline-block;
			}

			.d_eTxt,
			.d_eIts .d_eiTxt {
				min-height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				padding-right: 32rpx;
				margin-top: 4rpx;
			}

			.d_eTip,
			.d_eIts .d_eiTip {
				color: #939393;
				font-size: 20rpx;
				padding-left: 16rpx;
				display: inline-block;
			}

			// 他人回复
			.d_eiItem {
				margin-top: 16rpx;
			}

			.d_eiCont {
				overflow: hidden;
			}

			.d_eiReply {
				color: #939393;
				font-size: 20rpx;
				padding: 0 4rpx;
			}
		}

		// 评论框=====
		.d_talk {
			.d_tShim {
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.d_tBox {
				width: 100vw;
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 101;
				box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, 0.16);
			}

			.d_tFuns {
				padding-left: 30rpx;
				float: right;
			}

			.d_tFun {
				width: 110rpx;
				height: 96rpx;
				float: right;
			}

			.d_tIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #6c6c6c;
				font-size: 40rpx;
				margin: 0 auto;
				padding-top: 14rpx;
				box-sizing: content-box;
			}

			.d_tTxt {
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #939393;
				font-size: 20rpx;
			}

			.d_tInput {
				height: 60rpx;
				margin: 20rpx 0 0 32rpx;
				border-radius: 60rpx;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding: 0 28rpx;
					background: #f6f7fb;
				}
			}
		}

		// 浮窗按钮=====
		.d_fixed {
			position: fixed;
			right: 32rpx;
			bottom: 370rpx;
			z-index: 53;

			.d_fBtn {
				width: 118rpx;
				height: 118rpx;
				margin-top: 22rpx;
				border-radius: 50%;
				background: #fff;
				box-shadow: 0 0 20rpx #dedede;
				overflow: hidden;

				&:active {
					opacity: 0.92;
				}
			}

			.d_fcIcon {
				width: 40rpx;
				height: 40rpx;
				margin: 25rpx auto 0;
			}

			.d_fcTxt {
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 22rpx;
			}
		}

		// 目录
		.d_catalog {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			visibility: hidden;
			transition: visibility 0.3s;

			&.active {
				visibility: visible;

				.d_cBg {
					opacity: 1;
				}

				.d_cContain {
					transform: translateY(0);
				}
			}

			.d_cBg {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.6);
				opacity: 0;
				transition: opacity 0.3s;
			}

			.d_cContain {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				flex-flow: column;
				transition: transform 0.3s;
				transform: translateY(100%);
			}

			.d_cShade {
				height: 256rpx;
			}

			.d_cBox {
				border-radius: 24rpx 24rpx 0 0;
				background: #fff;
				position: relative;
				overflow: hidden;
				display: flex;
				flex-flow: column;
				flex: 1;
			}

			.d_cClose {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #333;
				font-size: 40rpx;
				padding: 16rpx;
				position: absolute;
				top: 30rpx;
				right: 16rpx;
				box-sizing: content-box;
			}

			.d_cTitle {
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-weight: bold;
				padding: 40rpx 0 30rpx;
				box-sizing: content-box;
			}

			.d_cList {
				overflow-y: auto;
				flex: 1;
			}

			.d_cItem {
				padding: 30rpx 0;
				position: relative;
			}

			.d_cArrow {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #939393;
				font-size: 32rpx;
				position: absolute;
				top: 34rpx;
				right: 32rpx;
			}

			.d_cName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				padding-left: 36rpx;
			}

			.d_cImgs {
				padding: 14rpx 0 0 32rpx;
				overflow: hidden;
			}

			.d_cImg {
				width: 220rpx;
				height: 220rpx;
				margin: 14rpx 14rpx 0 0;
				border-radius: 4rpx;
				background: #f0f0f0;
				float: left;
			}
		}
	}

	.infobottom {
		background: #fff;
		border-radius: 15rpx 15rpx 0 0;
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 99;
		box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;

		.d_ctShop {
			height: 106rpx;
			line-height: 106rpx;
			font-weight: bold;
			padding: 0 64rpx 0 40rpx;
			margin: 28rpx 32rpx 0;
			border-radius: 10rpx;
			background: #f6f7fb;
			position: relative;
		}

		.d_ctShop-icon {
			width: 66rpx;
			height: 66rpx;
			margin-top: -33rpx;
			position: absolute;
			top: 50%;
			right: 30rpx;
			background: #fff;
			border-radius: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 13rpx;
				margin-left: 13rpx;
			}
		}

		.d_ctShop-txt {
			float: left;
		}

		.d_ctShop-imgs {
			overflow: hidden;
		}

		.d_ctShop-img {
			width: 66rpx;
			height: 66rpx;
			margin: 20rpx 0 0 28rpx;
			border-radius: 4rpx;
			background: #fff;
			overflow: hidden;
			float: left;
		}
	}

	.topinfo {
		position: relative;
		padding-right: 120rpx;

		.infoshare {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 120rpx;
			height: 84rpx;
			text-align: center;
			padding-top: 5rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				display: block;
				margin: auto;
				margin-bottom: 5rpx;
			}
		}
	}

	.infoshop {
		padding-left: 220rpx;
		position: relative;
		padding-right: 20rpx;
		padding-top: 20rpx;

		.shopimg {
			width: 180rpx;
			height: 140rpx;
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			background: #d8d8d8;
			border-radius: 15rpx;
		}

		.infotitle {
			font-size: 30rpx;
			font-weight: bold;
			padding-right: 90rpx;
			position: relative;
			line-height: 50rpx;

			text {
				position: absolute;
				right: 0;
				top: 0;
				font-weight: normal;
			}
		}

		.infotext {
			font-size: 28rpx;
			color: #999;
			line-height: 50rpx;
		}

		.infoprie {
			font-size: 30rpx;
			color: #e9423e;
		}

		.infobtn {
			position: absolute;
			right: 20rpx;
			bottom: 0;
			border: 1px #e9423e solid;
			color: #e9423e;
			padding: 6rpx 20rpx;
			border-radius: 8rpx;
		}
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, 0.4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}

	.text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; // 超出多少行
		-webkit-box-orient: vertical;
	}
// 固定条
	.into_shopcart {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 301;
		background-color: #fff;
		display: flex;
		align-items: center;

		&_box {
			padding: 14rpx 22rpx;
			display: flex;

			// 左边小图标
			.into_icon {
				flex: 1;
				position: relative;

				.icon_store {
					flex: 1;
					text-align: center;

					.store {
						width: 100%;
						font-size: 36rpx;

						image {
							display: block;
							margin: auto;
							width: 32rpx;
							height: 32rpx;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.icon_service {
					flex: 1;
					position: relative;
					text-align: center;

					.cell-service {
						position: absolute;
						right: 0;
						bottom: 0;
						left: 0;
						top: 0;
						opacity: 0;
						z-index: 10;

						.cell--bubble {
							width: 100%;
						}
					}

					.service {
						width: 100%;
						font-size: 36rpx;

						.iconhuaban117 {
							color: #fa3534;
						}

						image {
							display: block;
							margin: auto;
							width: 32rpx;
							height: 32rpx;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.contact_btn {
					width: 44rpx;
					height: 74rpx;
					margin-left: 46rpx;
				}

				button[plain] {
					border: 0 none;
				}
			}

			// 右边按钮
			.into_btn {
				height: 72rpx;
				border-radius: 10rpx;
				margin-left: 40rpx;
				display: flex;

				.join {
					width: 430rpx;
					background: #ccc;
					text-align: center;
					color: #fff;
					line-height: 72rpx;
					border-radius: 10rpx;
				}

				.join_cart {
					width: 226rpx;
					height: 100%;
					text-align: center;
					line-height: 72rpx;
					background-color: #c3ab7c;
					border-radius: 10rpx 0rpx 0rpx 10rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #ffffff;
					}
				}

				.into_settlement {
					width: 204rpx;
					height: 100%;
					text-align: center;
					line-height: 72rpx;
					background-color: #333;
					border-radius: 0rpx 10rpx 10rpx 0rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
	// 客服弹框
	.pouchat {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	
		.poucont {
			position: absolute;
			top: 30%;
			left: 15%;
			right: 15%;
	
			.icon-close {
				width: 80rpx;
				height: 80rpx;
				font-size: 70rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				margin: 30rpx auto;
			}
		}
	
		.chatlist {
			background: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
		}
	
		.chatml {
			position: relative;
			padding: 20rpx;
			padding-left: 100rpx;
			min-height: 100rpx;
	
			.cell-service {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 10;
	
				.cell--bubble {
					width: 100%;
				}
			}
	
			text {
				display: block;
				line-height: 40rpx;
			}
	
			.t1 {
				font-size: 32rpx;
			}
	
			.t2 {
				font-size: 24rpx;
				color: #999;
			}
	
			image {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				left: 15rpx;
				top: 25rpx;
			}
		}
	}
	.flex {
		display: flex;
	}
</style>
